<html>
  <head>
    <script
    	type="text/javascript"
    	language="javascript"
			src="jsPgnViewer.js">
			</script>
  </head>
		
		<title>Sample setups with configuration</title>

  <body>
<h4>Default configuration</h4>
<div style="border:2px solid #000000;padding: 5px">
	<i>
	 &lt;script&gt;<br>
	 var brd = new Board('area', {'showMovesPane':true})<br>
	 brd.init()<br>
	 &lt;/script&gt;
	</i>
</div>
<br>
<div id="area_board"></div>

<div id='area' style="visibility: hidden;display:none">
[Site "New Delhi IND"]
[Date "2006.12.23"]
[Round "7"]
[White "Lahno,Kateri"]
[Black "Negi,P"]
[Result "1-0"]
[WhiteElo "2459"]
[BlackElo "2538"]
[EventDate "2006.12.17"]
[ECO "C54"]

1. e4 e5 2. Nf3 Nc6 3. Bc4 Nf6 4. d3 Bc5 5. c3 a6 6. Nbd2 O-O 7. Bb3 Ba7 8.
O-O d6 9. h3 Nh5 10. Re1 Qf6 11. Nf1 Nf4 12. Ng3 g6 13. Be3 h5 14. d4 Nd8
15. d5 Bd7 16. Rc1 a5 17. a3 a4 18. Ba2 Bc5 19. Kh2 g5 20. Nd4 h4 21. Nh5
Qh6 22. Nxf4 gxf4 23. Nf5 Bxf5 24. Bxc5 Bd7 25. Bb4 f6 26. Bc4 Kh8 27. Be2
Rg8 28. Bg4 Qg7 29. Rg1 Bxg4 30. Qxg4 Qxg4 31. hxg4 Rxg4 32. Kh3 Rg5 33. c4
b6 34. g3 hxg3 35. fxg3 fxg3 36. Bd2 Rh5+ 37. Kxg3 Nf7 38. Kg4 Rh2 39. Rh1
Rg8+ 40. Kf5 Rgg2 41. Kxf6 Kg8 42. Ke7 Rxh1 43. Rxh1 Nh8 44. Bb4 Rg7+ 45.
Kd8 Ng6 46. Rg1 Kh7 47. Rh1+ Kg8 48. Rg1 Kh7 49. Rh1+ Kg8 50. Kc8 Nf4 51.
c5 dxc5 52. Bc3 Nd3 53. Rh5 Re7 54. Kd8 Rg7 55. Bxe5 Rg4 56. Ke7 Nxe5 57.
Rxe5 c4 58. Kd7 Rg2 59. Kxc7 Rxb2 60. d6 c3 61. d7 Rd2 62. d8=Q+ Rxd8 63.
Kxd8 c2 64. Rg5+ Kf7 65. Rg1 1-0
</div>
<script>
	var brd = new Board('area', {'showMovesPane':true})
	brd.init()
</script>

<hr size=1>
<br>

<h4>Slightly bigger board with custom fonts and colors</h4>
<div style="border:2px solid #000000;padding: 5px">
	<i>
	 &lt;script&gt;<br>
	var brd = new Board('areaBigger', {'imagePrefix':'img/kent/',<br>
		 																	'showMovesPane':true,<br>
																			'commentFontSize':'10pt',<br>
																			'moveFontColor':'#206020',<br>
																			'blackSqColor':'#ababab',<br>
																			'moveFontSize':'10pt',<br>
																			'boardSize':'377px',<br>
																			'squareSize':'46'})<br>
	 brd.init()<br>
	 &lt;/script&gt;
	</i>
</div>
<br>
<div id="areaBigger_board" width="100%"></div>

<div id='areaBigger' style="visibility: hidden;display:none">
[Event "Omaha City Championships"]
[Site "Central High"]
[Date "2005.11.19"]
[Round "4"]
[White "Cletus Roth"]
[Black "Kent Smotherman"]
[Result "0-1"]
[WhiteElo "1569"]
[BlackElo "1587"]
[ECO "C02"]

1. e4 e6 2. d4 d5 3. e5 c5 4. c3 Nc6 5. Nf3 cxd4 6. cxd4 Nge7 7. Na3 Nf5 8. Nc2
Qb6 9. a3 Bd7 10. Be2 Be7 11. O-O h6 12. g4 Nh4 13. Nxh4 Bxh4 14. f4 Be7 15. b4
a6 16. Be3 g5 ( Rc8 {0.41 v 1.49} 17. f5 exf5 18. gxf5 Bg5 19. Bxg5 hxg5
20. f6 Nxe5) 17. f5 exf5 18. gxf5 Qc7 19. Bh5 O-O ( Nd8 {1.55 v 3.09} 20.
Rc1 Bb5 21. Ne1 Qb6 22. Nd3) 20. f6 Bd8 21. Qd2 (21. Qd3 {2.91 v 2.17} 
Be6 22. Rf2 Qd7 23. h4 Bg4 24. Bg6 Kh8 25. Bh7)  Kh8 ( Qc8 {2.17 v
4.21} 22. Qd3 Bb6 23. Rac1 Bg4 24. Bg6 Bh3 25. Rf3 Qg4+) 22. Qg2 (22. Kh1 {4.21
v 2.92}  Nxe5 23. dxe5 Qxe5 24. Bc5 Re8 25. Rae1)  Be6 23. Bg4 (23.
h4 {2.93 v 1.74}  Rc8 24. Rac1 Nxd4 25. Bxd4 Rg8 26. Ne3 Qxc1 27. Rxc1)
 Bxg4 24. Qxg4 Nxe5 25. dxe5 Qxc2 26. Rf5 (26. Bc5 {2.17 v -0.12} 
Rg8 27. e6 Qg6 28. Rae1 Bc7)  Qc3 ( Rg8 {-0.12 v 6.57} 27. Rf2 Qd3
28. Bd4 Kh7 29. Rd1 Qe4 30. Qxe4+ dxe4) 27. Bd4 (27. Qh3 {6.57 v -1.99}) 
Bb6 28. Rd1 Bxd4+ 29. Rxd4 Qe1+ 30. Kg2 Rac8 31. Rf2 (31. Qd1 {-1.87 v -2.79}
 Qxd1 32. Rxd1 Rfd8 33. h4 gxh4 34. Rh5 Kh7 35. Rd4)  Rc1 32. Qh5
(32. Rd3 {-2.76 v -11.69}  Kg8 33. Qf3 Rd8 34. e6 Qxe6 35. Re3 Qb6) 
Kh7 ( Qh1+ {-11.69 v -3.25} 33. Kg3 Rc3+ 34. Rf3 Qg1+ 35. Kh3 Rxf3+ 36.
Qxf3 Qxd4) 33. Rg4 Qg1+ 34. Kf3 Rc3+ 35. Ke2 Rc2+ 36. Kd3 Qd1+ 37. Ke3 Rc3# 0-1
</div>
<script>
	var brd = new Board('areaBigger', {'imagePrefix':'img/png/',
																			'imageSuffix':'png',
		 																	'showMovesPane':true,
																			'commentFontSize':'10pt',
																			'moveFontColor':'#206020',
																			'blackSqColor':'#ababab',
																			'moveFontSize':'10pt',
																			'boardSize':'377px',
																			'squareSize':'46'})
	brd.init()
</script>

<hr size=1>

<br>

<h4>Internationalized and customized board with custom chess set and background images</h4>
<div style="border:2px solid #000000;padding: 5px">
	<i>
	 &lt;script&gt;<br>
	var brd = new Board('areaZurich', {'imagePrefix':'img/zurich/',<br>
		 								'showMovesPane':true,<br>
										'commentFontSize':'10pt',<br>
										'moveFontColor':'#af0000',<br>
										'commentFontColor':"#006699",<br>
										'squareSize':'32px',<br>
										'markLastMove':false,<br>
										<br>
										'blackSqColor':'url("img/zurich/board/darksquare.gif")',<br>
										'lightSqColor':'url("img/zurich/board/lightquare.gif")',<br>
										<br>
										'squareBorder':"0px solid #000000",<br>
										'altRewind':'Ir al principio',<br>
										'altBack':'Una jugada atrás',<br>
										'altFlip':'Girar el tablero',<br>
										'altShowMoves':'Mostrar el panel de jugadas',<br>
										'altComments':'Mostrar comentarios',<br>
										'altPlayMove':'Una jugada adelante',<br>
										'altFastForward':'Ir al final',<br>
										'moveBorder':"1px solid #cccccc"<br>
										});<br>
	 brd.init()<br>
	 &lt;/script&gt;
	</i>
</div>
<br>
<div id="areaZurich_board" width="100%"></div>

<div id='areaZurich' style="visibility: hidden;display:none">
[Event "WCh"]
[Site "Mexico City MEX"]
[Date "2007.09.21"]
[Round "8"]
[White "Leko, P."]
[Black "Grischuk, A."]
[Result "1-0"]
[ECO "C88"]
[WhiteElo "2751"]
[BlackElo "2726"]
[PlyCount "119"]
[EventDate "2007.09.13"]

1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 4. Ba4 Nf6 5. O-O Be7 6. Re1 b5 7. Bb3 O-O 8. a4
b4 9. d3 d6 10. Nbd2 Be6 11. Bxe6 fxe6 12. Nf1 Qd7 13. Ng3 Na5 14. d4 exd4 15.
Qxd4 c5 16. Qd3 Nc6 17. c3 bxc3 18. bxc3 Kh8 19. h3 Qc7 20. Ng5 Ne5 21. Qe2 Qc8
22. f4 Nf7 23. Nf3 Rb8 24. c4 Qb7 25. Bd2 Qb2 26. Qd3 Qb7 27. Bc3 Qc6 28. a5
Kg8 29. Rad1 Rbd8 30. f5 e5 31. Nf1 Rb8 32. g4 h6 33. N1d2 Qc7 34. Kh1 Qd8 35.
Rg1 Nh7 36. Nf1 Bg5 37. Ne3 Bxe3 38. Qxe3 Rb3 39. Rd3 Nhg5 40. Nd2 Ra3 41. h4
Nh7 42. Nf3 Nf6 43. g5 hxg5 44. hxg5 Nh5 45. Bd2 Ra4 46. Qe2 Ra2 47. Qe1 Nf4
48. Bxf4 exf4 49. Qh4 Qe8 50. g6 Nh6 51. Qxf4 Re2 52. Ng5 Qa4 53. Qxd6 Qxc4 54.
Qd5+ Qxd5 55. Rxd5 c4 56. Rd7 c3 57. Ne6 Rc8 58. Rgd1 Rd2 59. R1xd2 cxd2 60.
Rxd2 1-0

</div>
<script>
	var brd = new Board('areaZurich', {'imagePrefix':'img/zurich/',
		 								'showMovesPane':true,
										'commentFontSize':'10pt',
										'moveFontColor':'#af0000',
										'commentFontColor':"#006699",
										'squareSize':'32px',
										'markLastMove':false,
										
										'blackSqColor':'url("img/zurich/board/darksquare.gif")',
										'lightSqColor':'url("img/zurich/board/lightquare.gif")',
										
										'squareBorder':"0px solid #000000",
										'altRewind':'Ir al principio',
										'altBack':'Una jugada atrás',
										'altFlip':'Girar el tablero',
										'altShowMoves':'Mostrar el panel de jugadas',
										'altComments':'Mostrar comentarios',
										'altPlayMove':'Una jugada adelante',
										'altFastForward':'Ir al final',
										'moveBorder':"1px solid #cccccc"
										});
	brd.init()
</script>

<hr size=1>

<br>

<h4>A board with a FEN starting position. The PGN contains the FEN part.</h4>
<div style="border:2px solid #000000;padding: 5px">
	<i>
	 &lt;script&gt;<br>
	var brd = new Board('fen', {'imagePrefix':'img/zurich/',<br>
		 								'showMovesPane':true,<br>
										'commentFontSize':'10pt',<br>
										'moveFontColor':'#af0000',<br>
										'commentFontColor':"#006699",<br>
										'squareSize':'32px',<br>
										'markLastMove':false,<br>
										<br>
										'blackSqColor':'url("img/zurich/board/darksquare.gif")',<br>
										'lightSqColor':'url("img/zurich/board/lightquare.gif")',<br>
										<br>
										'squareBorder':"0px solid #000000",<br>
										'moveBorder':"1px solid #cccccc"<br>
										});<br>
	 brd.init()<br>
	 &lt;/script&gt;
	</i>
</div>
<br>
<div id="fen_board" width="100%"></div>

<div id='fen' style="visibility: hidden;display:none">
[Event "SOK theme63 corr"]
[Site "corr"]
[Date "1990.??.??"]
[Round "?"]
[White "Brinkmann, W"]
[Black "Hunstock, J"]
[Result "0-1"]
[ECO "A00"]
[SetUp "1"]
[FEN "r1b2k1B/pppp3p/2n2p2/8/3N2nq/1QP3bN/P2PP1Bp/R4K1R b - - 0 14"]
[PlyCount "21"]
[EventDate "1990.??.??"]
[EventType "tourn (corr)"]
[EventRounds "2"]

14... d6 15. Nf3 Qxh3 16. Qxb7 Bxb7 17. Bxh3 Nce5 18. Kg2 Bf4 19. Bxg4 Nxg4 20. Rhf1 Kf7 21. Kh3 h1=Q+ 22. Rxh1 Nf2+ 23. Kg2 Nxh1 24. Rxh1 Rxh8 0-1
</div>
<script>
	var brd = new Board('fen', {'imagePrefix':'img/zurich/',
		 								'showMovesPane':true,
										'commentFontSize':'10pt',
										'moveFontColor':'#af0000',
										'commentFontColor':"#006699",
										'squareSize':'32px',
										'markLastMove':false,
										
										'blackSqColor':'url("img/zurich/board/darksquare.gif")',
										'lightSqColor':'url("img/zurich/board/lightquare.gif")',
										
										'squareBorder':"0px solid #000000",
										'moveBorder':"1px solid #cccccc"
										});
	brd.init()
</script>

<hr size=1>



  </body>
</html>
